<template>
<nav class="container flex flex-col sm:flex-row items-center gap-4 text-white py-6"> 
    <div class="flex items-center gap-3">
  <router-link to="/" >
    <div class="flex items-center gap-3">
    <i  class="fa-solid fa-sun text-2xl" ></i>
    <p class="text-2xl">新中地天气</p>
    </div>
  </router-link>
    </div>
  <div class="flex gap-4 items-center">
    <h4 class="text-lg">{{city}}</h4>
    <span class="text-sm">实时天气：{{ WeatherStore.LocalWeather.weather }} {{ WeatherStore.LocalWeather.temperature }}℃</span>
    <span class="text-sm">{{ WeatherStore.LocalWeather.winddirection }}风{{ WeatherStore.LocalWeather.windpower }}级</span>
  </div>
  <div class="flex gap-3 flex-1 justify-end">
    <i  class="fa-solid fa-circle-info text-xl hover:text-weather-secondary cursor-pointer duration-1000" @click="showTip"></i>
    <i  class="fa-solid fa-plus text-xl hover:text-weather-secondary duration-150 cursor-pointer" 
    v-if="isSearchRoute" @click="handlesave" :class="WeatherStore.checkdata(_adcode)?'display-none':'opacity-1'"> </i>
  </div>
</nav>
</template>

<script setup>
import { ref,defineEmits,onMounted, computed, watch } from 'vue'
import { useWeatherStore  } from '../stores/counter'
import { useRoute } from 'vue-router'
const route = useRoute()
const emit = defineEmits(['toggleShade'])
function showTip() {
    emit('toggleShade')
}
const key = ref('')
const city = ref('')
const adcode = ref('')
const _adcode = ref('')
const WeatherStore = useWeatherStore()

function handlesave(){
    WeatherStore.addData(WeatherStore.cityInfo)
}

onMounted(async () => {
    key.value = WeatherStore.key
    const res = await WeatherStore.getLocallocation(key.value)
    city.value = res.city
    adcode.value = res.adcode
    await WeatherStore.getLocalWeather(adcode.value, key.value, 'base')
    console.log(WeatherStore.DataList)
    console.log()
})

const isSearchRoute = computed(() => route.path.startsWith('/weather/'))
watch(() => WeatherStore.cityInfo.adcode, (newAdcode) => {
    _adcode.value = newAdcode
}, { immediate: true });
</script>
<style scoped>
.hover\:text-weather-secondary:hover {
    --tw-text-opacity: 1;
    color: rgb(0 78 113 );
}
.display-none{
    display:none;
}
</style>